import React from "react";
import { Header } from "./Header";
import { BrowserRouter,Route,Link,Switch} from 'react-router-dom';
import Content from "./Content";

// const Home=(props)=>{
//     // console.log(props);//!props里面有
//     return <h1>首页</h1>
// }
// const New=(props)=>{
//     // console.log(props);//!props是空{}
//     return <h1>新手入门</h1>
// }
// const Login=()=><h1>登录页面</h1>
// const User=(props)=>{
//     console.log(props)
//     return <h1>用户详情页--{props.match.params.userName}</h1>
// }

const App=()=>{
    return (
        <>
            <BrowserRouter>
                <Header/>

                {/* <Link to='/'>首页</Link>
                <Link to='/new'>新手入门</Link>
                <Link to='/login'>登录</Link> */}
                
                {/* <Route exact path='/'><Home/></Route> */}

                {/* Route单标签形式 */}
                {/* <Route exact path='/' component={Home}/>

                <Route path='/new'><New/></Route>
                <Route path='/login'><Login/></Route>

                <Route path='/:userName'><User/></Route> */}
                <Content/>
                {/* //! 只会显示与 <Route> 路径匹配成功的第一个 ？？？*/}
                
                {/* <Switch>
                    <Route exact path='/' component={Home}/>

                    <Route path='/new'><New/></Route>
                    <Route path='/login'><Login/></Route> */}

                    {/* 把参数的放在最后，保证前面的都没有匹配成功 */}
                    {/* <Route path='/:userName'><User/></Route> */}
                    {/* <Route path='/:userName' component={User}/>
                </Switch> */}
            </BrowserRouter>
        </>
    )
}
// !           npm start          yarn start
//! 下载一个包  npm i packageName  yarn add package
//! 删除一个包  npm uninstall pN   yarn remove pN
//!              npm比较慢          yarn比较快 

//! 全局安装yarn  npm i yarn -g 
//! yarn add react-router-dom
export default App;
